 <template>
 	<view class="Box" style="">
 		<!-- 网页背景开始 -->
 		<view class="pagbg anmt" :style="{backgroundColor:pageBg}"></view>
		<view class="zhongMenu" v-if="autoRead" @click="dianjile()"></view>
 		<!-- 网页背景结束 -->
 		<!-- 带返回键的导航栏开始 --> 
 		<view class="topBox anmt" :style="{color:fontColor,backgroundColor:menuBg,top:show?'0':'-150px'}">
 			<view :style="{height:statusBarHeight}"></view>
 			<view style="height: 100upx;line-height: 100upx;text-overflow: ellipsis;" class="tMain">
 				<image src="../../static/yueduBack.png" class="back" @click="back()"></image>
 				<text style="font-size: 24upx;">({{title}})</text>
 			</view>
 		</view> 
 		<!-- 带返回键的导航栏结束 -->
 		<!-- 菜单开始 -->
 		<view class="bottomBox anmt" :style="{color:fontColor,backgroundColor:menuBg,bottom:show?'0':'-150px'}">
 			<view style="overflow: hidden;">
 				<view style="float: left;width: 50%;overflow: hidden;">
 					<view style="float: left;width: 30%;line-height: 70upx;text-align: center;font-size: 24upx;">字体</view>
 					<view style="float: left;width: 70%;height: 70upx;display: flex;align-content: center;justify-content: center;">
 						<slider style="width: 100%;" :value="size" min="20" max="100" @changing="changeFontSize" @change="changeFontSize" :activeColor="fontColor" :backgroundColor="pageBg" :block-color="fontColor" block-size="20" />
 					</view>
 				</view>
 				<view style="float: left;width: 50%;overflow: hidden;">
 					<view style="float: left;width: 30%;line-height: 70upx;text-align: center;font-size: 24upx;">间距</view>
 					<view style="float: left;width: 70%;height: 70upx;display: flex;align-content: center;justify-content: center;">
 						<slider style="width: 100%;" :value="lineHeight" min="50" max="150" @changing="changeLineHeight" @change="changeLineHeight" :activeColor="fontColor" :backgroundColor="pageBg" :block-color="fontColor" block-size="20" />
 					</view>
 				</view>
 			</view>
 			<view style="overflow: hidden;">
 				<view style="float: left;width: 15%;line-height: 100upx;text-align: center;font-size: 24upx;">背景</view>
 				<view style="float: left;width: 85%;height: 100upx;display: flex;">
 					<view class="sekuai" v-for="(item,index) in zhutiList" @tap="qiehuan(index)" :key="item.name" :style="{backgroundColor:item.pageBg,borderColor:dqzhuti==index?item.fontColor:'rgba(0,0,0,0)'}" v-if="index!=1&&index!=2"></view>
 				</view>
 			</view>
			
 			<view style="width: 100%;display: flex;" class="ddd">
 				<view @click="showDrawer">
 					<view><text class="tficon">&#xe671;</text></view>
 					<view>目录</view>
 				</view>
 				<view @click="qiehuan(dqzhuti==1?0:1)">
 					<view><text class="tficon">{{dqzhuti==1?'&#xe699;':'&#xe612;'}}</text></view>
 					<view>{{dqzhuti==1?'白天':'夜间'}}</view>
 				</view>
 				<view @click="qiehuan(dqzhuti==2?0:2)" :style="dqzhuti==2?'color:green':''">
 					<view><text class="tficon">&#xe639;</text></view>
 					<view>护眼</view>
 				</view>
				<view @click="clickAutoRead">
					<view><text class="tficon">{{autoRead?'&#xe600;':'&#xe690;'}}</text></view>
					<view>{{autoRead?'退出自动':'自动阅读'}}</view>
				</view>
 			</view>
 		</view>
		
 		<!-- 菜单结束 -->
 		<!-- 小说正文开始 -->
 		<scroll-view scroll-y="true" scroll-with-animation="true" :scroll-top="scrolltop" @scroll="scroll" @scrolltolower="scrolltolower" class="sview" style="height:100vh;box-sizing: border-box;" :style="{color:textColor,fontSize:forUpx(size)+'px',lineHeight:forUpx(lineHeight)+'px'}">
 			<rich-text @click="dianjile()" v-for="(item,index) in contents" :nodes="item" :key="index"></rich-text>
			<view class="menunv">
				<view class="menunv-item" @click="prevBookchapter">上一章</view>
				<view class="menunv-item border-left-1" @click="showDrawer">目录</view>
				<view class="menunv-item border-left-1" @click="nextBookchapter">下一章</view>
			</view>
 		</scroll-view> 
		
 		<!-- 小说正文结束 -->
		<uni-drawer ref="showRight" width="280" mode="left" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view style="padding:10upx; text-align: center;line-height: 50upx;height:50upx;color:111;font-size:32upx;font-weight: 600;border-bottom: 1px solid #eee;">目录</view>
				<view style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:100%;text-align: left;padding:20upx;border-bottom:1px solid #eee;height:40upx;line-height: 40upx;font-size:28upx;" @click="changeBookchapter(item)" v-for="(item,index) in bookchapters" :key="index">{{index+1}}、{{ item.title }}</view>
			</scroll-view>
		</uni-drawer>
 	</view>
 </template> 
 <script>

 import zhuti from '../../zhuti'
 export default{
 	data(){
 		return{
			book_id:0,
			bookchapter_id:0,
			bookchapter_speed:0,
 			title:'',//章节标题
 			//正文
 			contents:[],
			bookchapters:[],
			autoRead:false,
			autoReadInter:null,
			scrolltop:0,
			
			scrolltop_temp:0,
			
 			show:false,//菜单display
 			dqzhuti:0,//当前主题
 			zhutiList:zhuti.data,//主题列表
 			fontColor:'rgb(100,103,120)',//菜单字体颜色
 			pageBg:'rgb(247,247,247)',//页面背景色
 			menuBg:'#fff',//菜单背景色
 			textColor:'#000',//富文本文字颜色
 			statusBarHeight: '',
 			Dindex:'',//当前章节索引
 			shuming:'斗破苍穹',//书名
 			id:'',//本书ID
 			battery:'',//电量
 			systemTime:'',//系统时间
 			size:uni.getStorageSync('fontsize')?uni.getStorageSync('fontsize'):30,//正文字体大小
 			lineHeight:uni.getStorageSync('lineHeight')?uni.getStorageSync('lineHeight'):70,//正文行间距
 		}
 	},
 	onUnload() {
 		uni.hideLoading();
		this.fetchHistory();
 	},
 	created() {
 		var this_ = this;
 		//获取状态栏高度给顶部占位节点
 		
 		var zt = uni.getStorageSync('zhuti');//主题索引
 		if(zt){
 			this.dqzhuti = zt;
 			this.fontColor=zhuti.data[zt].fontColor;//菜单字体颜色
 			this.pageBg=zhuti.data[zt].pageBg;//页面背景色
 			this.menuBg=zhuti.data[zt].menuBg;//菜单背景色
 			this.textColor=zhuti.data[zt].textColor;//富文本文字颜色
 		}else{
 			this.dqzhuti = 0;
 			this.fontColor=zhuti.data[0].fontColor;//菜单字体颜色
 			this.pageBg=zhuti.data[0].pageBg;//页面背景色
 			this.menuBg=zhuti.data[0].menuBg;//菜单背景色
 			this.textColor=zhuti.data[0].textColor;//富文本文字颜色
 		}
 		uni.getSystemInfo({
 			success: res=>{
 				this.statusBarHeight = res.statusBarHeight + 'px';
 			}
 		})
 	},
 	onShow() {
 		
 	},
 	onHide() {
 		//页面隐藏的时候将通知栏显示出来
 	},
 	onLoad(props) {
		if(props.book_id) this.book_id = props.book_id * 1;
		if(props.bookchapter_id) this.bookchapter_id = props.bookchapter_id * 1 ;
		if(props.bookchapter_speed) this.bookchapter_speed = props.bookchapter_speed * 1;
 		this.fetch() ;
 	},
 	methods:{
		fetch(){
			this.fetchBookchapter() ;
			this.fetchBookchapterDetail();
		},
		fetchBookchapterSpeed(){
			if(this.bookchapter_speed){
				this.scrolltop = this.bookchapter_speed ;
			}
		},
		showDrawer() {
			this.$refs.showRight.open();
		},
		closeDrawer() {
			this.$refs.showRight.close();
		},
		scroll(e){
			this.scrolltop_temp = e.detail.scrollTop ; 
			this.bookchapter_speed = e.detail.scrollTop;
		},
		scrolltolower(){
			if(this.autoRead) this.nextBookchapter() ;
		} ,
		fetchHistory(){
			if(!this.book_id) return ;
			
			let that = this ;
			let post = {} ;
			post.book_id = this.book_id ; 
			post.bookchapter_id = this.bookchapter_id ; 
			post.bookchapter_speed = this.bookchapter_speed ; 
			this.$iapi.vapi('readinghistory/add', post, {
				succ: js => {
					
				},
				ever: js => {
					
				},
				fail:js=>{
					
				}
			});
		},
		fetchBookchapter(){
			if(!this.book_id || this.book_id < 1) return ; 
			
			let that = this ;
			let post = {} ;
			post.book_id = this.book_id ;  
			this.$loading.show('加载中') ;
			this.$iapi.vapi('bookchapter/s', post, {
				succ: js => {
					if(!js || !js.list || js.list.length < 1) return ; 
					
					let bookchapter_id = 0 ;
					js.list.map(it=>{
						if(!bookchapter_id) bookchapter_id = it.id ; 
						that.bookchapters.push(it) ; 
					}) ;
					
					if(!that.bookchapter_id){
						that.bookchapter_id = bookchapter_id ;
						that.fetchBookchapterDetail() ; 
					}
				},
				ever: js => {
					this.$loading.hide() ;
				},
			});
		},
		
		fetchBookchapterDetail(){
			if(!this.bookchapter_id || this.bookchapter_id < 1) return ;
			
			this.fetchHistory() ;
			
			let that = this ;
			let post = {} ;
			post.id = this.bookchapter_id ;  
			this.$loading.show('加载中') ;
			this.$iapi.vapi('bookchapter/detail', post, {
				succ: js => {
					if(!js || !js.detail) return ; 
					
					this.title = js.detail.title ;
					this.contents = js.detail.contents ; 
					this.autoReadRetry();
					if(!this._nfirstSpeed){
						this.fetchBookchapterSpeed() ;
						this._nfirstSpeed = true ;
					}
				},
				ever: js => {
					this.$loading.hide() ;
				},
			});
		} ,
		autoReadRetry(){
			if(this.autoRead){
				let that = this ;
				this.autoRead = false ; 
				if(this.autoReadInter) clearInterval(this.autoReadInter);
				setTimeout(function(){
					that.clickAutoRead();
				},1000) ;
			}
		},
		clickAutoRead(){
			if(this.autoReadInter) clearInterval(this.autoReadInter);
			
			this.autoRead = !this.autoRead ;
			if(this.autoRead){
				let that = this;
				this.scrolltop = this.scrolltop_temp ;
				this.autoReadInter = setInterval(function(){
					that.scrolltop += 1;
				},20) ;
			} 
		},
 		//修改正文字体大小
 		changeFontSize(e){
 			this.size = e.detail.value;
 			uni.setStorageSync('fontsize',e.detail.value);
 		},
 		//修改正文行间距
 		changeLineHeight(e){
 			this.lineHeight = e.detail.value;
 			uni.setStorageSync('lineHeight',e.detail.value);
 		},
 	
		changeBookchapter(item){
			if(!item || !item.id) return ;
			this.bookchapter_id = item.id ; 
			this.bookchapter_speed = 0 ;
			this.contents = [] ;
			this.scrolltop = 0 ;
			this.fetchBookchapterDetail() ;
			this.closeDrawer();
		},
		prevBookchapter(){
			
			for(var i in this.bookchapters){
				if(this.bookchapters[i].id != this.bookchapter_id) continue ;
				
				if(this.bookchapters[(i*1-1)]){
					this.bookchapter_id = this.bookchapters[(i*1-1)].id ;
					this.bookchapter_speed = 0 ;
					this.contents = [] ;
					this.scrolltop = 0 ;
					this.fetchBookchapterDetail();
					return ; 
				}
				
				break ; 
			}
			
			this.$tip.alert('已经是第一章了');
		},
		nextBookchapter(){
			for(var i in this.bookchapters){
				if(this.bookchapters[i].id != this.bookchapter_id) continue ;
				
				if(this.bookchapters[(i*1+1)]){
					this.bookchapter_id = this.bookchapters[i*1+1].id ;
					this.bookchapter_speed = 0 ;
					this.contents = [] ;
					this.scrolltop = 0 ;
					this.fetchBookchapterDetail();
					return ; 
				}
				
				break ; 
			}
			
			this.$tip.alert('没有更多章节了,作者正在努力码字');
		},
 		back(){
 			this.$go.back();
 		},
 		dianjile(){
 			this.show=!this.show;
 		},
 		//切换主题
 		qiehuan(e){
 			this.fontColor=zhuti.data[e].fontColor;//菜单字体颜色
 			this.pageBg=zhuti.data[e].pageBg;//页面背景色
 			this.menuBg=zhuti.data[e].menuBg;//菜单背景色
 			this.textColor=zhuti.data[e].textColor;//富文本文字颜色
 			uni.setStorageSync('zhuti',e);
 			this.dqzhuti=e;
 		},
 		
 		forUpx(e){
 			return uni.upx2px(e)
 		}
 	}
 }
 </script>
 <style>
 	@font-face {font-family: "iconfont";
 	  src: url('../../font/dianliang.ttf') format('truetype');
 	}
 	.iconfont {
 	  font-family: "iconfont" !important;
 	  font-style: normal;
 	  -webkit-font-smoothing: antialiased;
 	  -moz-osx-font-smoothing: grayscale;
 	}
 	.icon-80dianliang:before {
 	  content: "\e617";
 	}
 	.pagbg{
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
 	}
 	.zuizhong.active{
 		opacity: 1;
 		position: fixed;
 		width: 100upx;
 		text-align: center;
 		font-size: 30upx;
 		font-weight: bold;
 		color: #ec706b;
 		transform: translateX(50%) scale(0.7);
 		right: 80upx;
 		-webkit-transition: all 0.5s;
 		z-index: 9
 	}
 	.zuizhong{
 		opacity: 0;
 		position: fixed;
 		width: 100upx;
 		text-align: center;
 		font-size: 20upx;
 		font-weight: bold;
 		color: #ec706b;
 		right: 80upx;
 		transform: translateX(50%)  scale(0.1);
 		-webkit-transition: all 0.5s;
 		transition: all 0.5s;
 		z-index: 9
 	}
 	.quanquan{
 		-webkit-box-shadow: rgba(0,0,0,0.12) 0px 3px 13px 1px;
 		box-shadow: rgba(0,0,0,0.12) 0px 3px 13px 1px;
 		position: fixed;
 		right: 70upx;
 		z-index: 9;
 		border-radius: 50%;
 		overflow: hidden;
 		transform: translateX(50%) scale(0.5);
 	}
 	.back{
 		width: 40upx;
 		height: 40upx;
 		margin: 0 40upx;
 	}
 	.sview{
 		width: calc(100% - 40upx);
 		font-size: 45upx;
 		line-height: 90upx;
 		position: relative;
 		text-indent:calc(2em + 12upx);
 		margin: 0 auto;
 		z-index: 5;
 		white-space:normal;
 		word-break:break-all;
 		word-wrap:break-word;
 		overflow: hidden;
 		padding: 50upx 20upx 50upx;
 	}
 	.titlee{
 		width: 100%;
 		font-size: 45upx;
 		line-height: 65upx;
 		position: relative;
 		z-index: 5;
 		padding: 0 20upx 50upx;
 		text-indent:-2.3em;
 	}
 	.tMain{
 		display: flex;
 		align-items:center;
 	}
 	page{
 		letter-spacing:6upx;
 	}
 	.topBox{
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
 		opacity: 1;
 		z-index: 9;
 	}
 	.bottomBox{
 		padding: 0 0 20upx 0;
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		width: 100%;
 		opacity: 1;
 		z-index: 9;
 	}
 	.bottomBox .ddd>view{
 		width: 100%;
 		text-align: center;
 		font-size: 24upx;
 		line-height: 40upx;
 	}
 	.bottomBox .ddd image{
 		width: 40upx;
 		height: 40upx;
 	}
 	@font-face {font-family: "ydiconfont";
 	  src: url('../../font/font_1282539_9h0uwv1sxps.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
 	}
 	.tficon{
 		font-family: ydiconfont;
 		font-size: 34upx;
 	}
 	.guanggao{
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		z-index: 6;
 		width: 100%;
 	}
 	.dianxin{
 		position: absolute;
 		top: 32.5%;
 		left: 11%;
 		width: 72%;
 		height: 35%;
 	}
 	.dLiang{
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
 		display: block;
 	}
 	.anmt{
 		transition: all 0.5s;
 	}
 	.sekuai{
 		width: 150upx;
 		height: 100upx;
 		background-color: #EC706B;
 		border-radius: 12upx;
 		border: 5upx solid #000;
 		transform: scale(0.4);
 		margin: -10upx -35upx 0;
 	}
 	.zhongMenu{
 		top: 50%;
 		position: fixed;
 		left: 0;
 		width: 100%;
 		height: 100%;
 		transform: translateY(-50%);
 		z-index: 9;
 	}
	.menunv{display: flex;border: 1px solid #aaa; margin:20upx;height:70upx;align-items: center;}
	.menunv-item{flex: 1;height:30upx;line-height:30upx;}
	.border-left-1{border-left:1px solid #aaa;}
 </style>
 